import Vue from 'vue'
import Router from 'vue-router'
import employee from '@/router/modules/employee'
/* Layout */
import Layout from '@/layout'
// require.context:一次引入某个目录下面的所有文件
import approval from '@/router/modules/approval'
import attendance from '@/router/modules/attendance'
import department from '@/router/modules/department'
import permission from '@/router/modules/permission'
import role from '@/router/modules/role'
import salary from '@/router/modules/salary'
import social from '@/router/modules/social'

// 使用require.context进行一次性导入--------
const req = require.context('./modules', false, /.js$/)
const asyncR = req.keys().map(item => req(item).default)
console.log(asyncR)
// --------------------------------------

Vue.use(Router)

// 导入的路由模块数组
export const asyncRoutes = [
  employee,
  approval,
  attendance,
  department,
  permission,
  role,
  salary,
  social
]
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  // {
  //   path: '/emp...',
  //   component: Layout,
  //   children: [
  //     {
  //       path: ''
  //     }
  //   ]
  // },
  {
    // 没有找到页面的时候，跳转到404页面
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      // hidden: true,
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  }
]

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 把两个路由数组合并之后赋值给routes
  routes: [
    ...constantRoutes
    // ...asyncRoutes
  ] // []
})

// 1、我之前做过我们公司的一个人资管理系统，在这个系统里面。。。。。。
const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

// 会把所有的通过addRoutes添加的路由全部置空

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router
// 1、左侧菜单怎么渲染出来的？
//    根据路由配置信息，sidebar组件内部通过$router.options.routes获取到所有的路由配置信息，使用v-for进行循环遍历展示
//    先判断当前路由对象是否有hidden属性【渲染的时候内部会进行判断v-if，如果有hidden属性为true，就不会渲染】
//    也会给路由对象提供一个meta属性，一般会指定icon和title，icon渲染图标【可以渲染elemeent-ui内部自带的图标，也可以渲染自定义的图标】，
//    title渲染的是标题
//   element-ui自带的图标通过i标签可以直接渲染，自带的图标通过svg-icon组件可以直接进行渲染，vue-element-admin里面也进行了这样的判断
// 2、图标怎么渲染出来的？
// 3、404页面没有出现在左侧菜单，怎么处理这个逻辑的。
